<template>
  <div>
    <!-- 提示行 -->
    <div class="tip">{{ $t('introduce.tip') }}</div>
    <div class="container">
      <!-- 布局模板 -->
      <div class="feature-select-title">{{ $t('introduce.layoutTemplate') }}</div>
      <div class="layout-template">
        <img :src="systemMainImage" alt="" class="image" />
        <div class="text-content">
          <div class="title space-between">
            <span class="ellipsis">{{ systemName }}</span>
            <span class="tag">{{ $t('introduce.systemName') }}</span>
          </div>
          <div class="subtitle space-between">
            <span class="ellipsis-multiline" style="flex: 1">{{ systemDesc }}</span>
            <span class="tag">{{ $t('introduce.systemDescription') }}</span>
          </div>
          <div class="description space-between" style="margin-top: 12px">
            <ul class="ellipsis" style="display: flex; flex-direction: column">
              <li class="ellipsis" style="width: auto" v-for="(item, index) in formatFields" :key="index">
                · {{ item }}
              </li>
            </ul>
            <span class="tag">{{ $t('introduce.functionIntroduction') }}</span>
          </div>
        </div>
      </div>

      <hr />

      <!-- 子系统介绍字段选择 -->
      <div class="feature-select-title">{{ $t('introduce.subSystemIntroduction') }}</div>

      <!-- 多选框 -->
      <div class="checkbox-group">
        <div v-for="n in checkFields" :key="n" v-show="n.show">
          <Checkbox :value="n.check" @update:value="checkboxChange(n)" style="white-space: nowrap">
            {{ n.label }}
          </Checkbox>
        </div>

        <!-- <label v-for="n in 6" :key="n"> <input type="checkbox" /> 选项{{ n }} </label> -->
      </div>

      <!-- 功能选择标题 -->
      <div class="feature-select-title">{{ $t('introduce.functionSelection') }}</div>

      <!-- 卡片布局 -->
      <div class="card-container">
        <div
          v-for="n in funcList"
          :key="n"
          class="card"
          :class="{ selected: selectFunc.includes(n) }"
          @click="toggleCard(n)"
        >
          <div class="card-content">
            <img :src="n.funcMainImage" class="card-image" />
            <div class="card-text">
              <div class="card-title">{{ n.funcName }}</div>
              <div class="card-description ellipsis-multiline" style="-webkit-line-clamp: 3">
                {{ n.funcDesc }}
              </div>
            </div>
          </div>
          <div class="checkmark" v-if="selectFunc.includes(n)">✔</div>
        </div>
      </div>

      <div class="footer">
        <Button @click="cancel">{{ $t('cancel') }} </Button>
        <Button style="background-color: #00bca4; color: #fff" @click="submit">{{ $t('confirm') }} </Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Button from '@/components/Button.vue'
import Checkbox from '@/components/Checkbox.vue'
import { ref, toRefs, computed, reactive } from 'vue'
import { getSystemFixedKey } from '@/mocks/customElement/system'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 接受父亲数据data
const props = defineProps<{
  data: { [key: string]: any };
}>()
const selectFunc = ref<number[]>([])

const { systemMainImage, systemName, systemDesc, funcList, field, aiSystemDesc } = toRefs(props.data)
const processFields = () => {
  const filed = JSON.parse(field.value) || []
  const resFiled = Array.isArray(filed) ? filed : filed.fieldData
  return resFiled
    .filter((item: any) => !item.defaultValue)
    .map((item: any) => {
      return {
        label: item.label,
        key: item.vModel,
        value: item.defaultValue,
        check: false,
        show: true,
      }
    })
}
// 子系统勾选的数据
const checkFields = reactive<any[]>([
  {
    label: t('introduce.systemImage'),
    key: getSystemFixedKey('系统图片'),
    value: systemMainImage.value,
    check: true,
    show: false,
  },
  {
    label: t('introduce.systemName'),
    key: getSystemFixedKey('系统名称'),
    value: systemName.value,
    check: true,
    show: true,
  },
  {
    label: t('introduce.systemDescription'),
    key: getSystemFixedKey('系统功能介绍'),
    value: systemDesc.value,
    check: true,
    show: true,
    aiValue: aiSystemDesc.value,
  },
  ...processFields(),
])
const checkboxChange = (item: any) => {
  item.check = !item.check
}

const toggleCard = (func: any) => {
  const index = selectFunc.value.indexOf(func)
  if (index === -1) {
    selectFunc.value.push(func)
  }
  else {
    selectFunc.value.splice(index, 1)
  }
}

const formatFields = computed(() => {
  const filed = JSON.parse(field.value) || []
  const resFiled = Array.isArray(filed) ? filed : filed.fieldData
  const res = resFiled.map((item: { [key: string]: any }) => item.defaultValue)
  return res.filter(Boolean)
})
const emit = defineEmits<{
  (event: 'confirm', payload: object): object;
  (event: 'cancel', payload: void): void;
}>() // 处理最终数据
const submit = () => {
  const result = {
    checkFields: checkFields.filter((item) => item.check),
    selectFunc: selectFunc.value,
  }

  emit('confirm', result)
  return result
}
const cancel = () => {
  return emit('cancel')
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20px;
}

.tip {
  color: gray;
  margin-bottom: 20px;
}

.layout-template {
  display: flex;
  margin-bottom: 20px;

  .image {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 10px;
    width: 120px;
    height: 120px;
    margin-right: 20px;
  }

  .text-content {
    width: 100%;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 24px;
      font-weight: bold;
    }

    .subtitle {
      font-size: 14px;
      font-weight: bold;
    }

    .description {
      font-size: 12px;
    }
  }
}

.subsystem-intro {
  margin: 20px 0;
}

.checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-bottom: 20px;
  gap: 20px;

  label {
    display: flex;
    align-items: center;
  }
}

.feature-select-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 100%;

  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.3s;
    border-radius: 4px;

    &.selected {
      border-color: blue;
    }

    .card-image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .card-text {
      flex-grow: 1;
    }

    .card-content {
      display: flex;

      flex-grow: 1;
      overflow: hidden;

      .card-title {
        font-size: 12px;
        margin-bottom: 5px;
      }

      .card-description {
        font-size: 10px;
        height: 40px;
      }
    }

    .checkmark {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 20px;
      color: blue;
    }
  }
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.tag {
  background-color: #40a9ff;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  padding: 2px 4px;
  font-weight: normal;
}

.ellipsis {
  flex: 1;
  width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all; /* 确保纯数字文本也能正确换行 */
  overflow-wrap: break-word; /* 确保长单词或数字能够正确换行 */
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all; /* 确保纯数字文本也能正确换行 */
  overflow-wrap: break-word; /* 确保长单词或数字能够正确换行 */
}

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
